{extend name='admin@public/content'}
{block name='style'}
<style>
    .param-table-list {
        overflow: auto;
        max-height: 500px;
        position: relative;
        overflow-y: scroll;
    }

    .param-input-td {
        position: relative;
        padding: 0 !important;
    }

    .param-input-td.one {
        width: 30%;
    }

    .param-input-td.thr {
        width: 20%;
        text-align: center;
    }

    .param-input-td.one:before {
        content: '名称'
    }

    .param-input-td.two:before {
        content: '内容'
    }

    .param-input-td:before {
        margin: 4px;
        width: 40px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: absolute;
        background: #e2e2e2;
    }

    .param-input-td input {
        padding-left: 50px;
        border: none !important;
    }
</style>
{/block}
{block name='content'}
<form onsubmit="return false;" action="" data-auto="true" method="post" class='form-horizontal layui-form' style='padding-top:20px'>
    {if isset($vo['id'])}
    <input type="hidden" name="id" value="{$vo.id}">
    {else}
    <input type="hidden" name="create_at" value="{:date('Y-m-d H:i:s')}">
    {/if}
    <input type="hidden" name="pid" value="{$vo.pid ?: ''}">
    <input type="hidden" name="title" value="{$vo.title ?: ''}">
    <!--<div class="form-group">-->
        <!--<label class="col-sm-2 control-label">分栏名称：<span class="nowrap"></span></label>-->
        <!--<div class='col-sm-8'>-->
            <!--<input type="text" name="title" title="请输入标题" required placeholder="请输入" value="{$vo.title ?: ''}" class="layui-input">-->
            <!--<p class="help-block"></p>-->
        <!--</div>-->
    <!--</div>-->

    <div class="form-group">
        <label class="col-sm-2 control-label">简介：<span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <textarea name="desc" required placeholder="请输入" class="layui-textarea">{$vo.desc ?: ''}</textarea>
            <p class="help-block"></p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">理念：<span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <textarea name="linian" required placeholder="请输入" class="layui-textarea">{$vo.linian ?: ''}</textarea>
            <p class="help-block"></p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">课程：<span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <textarea name="lesson" required placeholder="请输入" class="layui-textarea">{$vo.lesson ?: ''}</textarea>
            <p class="help-block"></p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">底部：<span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <div class="param-table-list">
                <table class="layui-table margin-none">
                    <tbody class="param-table-list">
                    {if !empty($vo['footer'])}
                    {foreach $vo['footer'] as $k=>$v}
                    <tr class="transition">
                        <td class="param-input-td one nowrap" style="padding: 0px;">
                            <input name="footer[{$k}][name]" value="{$v.name}" placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                        </td>
                        <td class="param-input-td two nowrap" style="padding: 0px;">
                            <input name="footer[{$k}][value]" value="{$v.value}" placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                        </td>
                        <td class="param-input-td nowrap text-center" style="padding: 0px;">
                            <input type="checkbox" {if $v.status==1}checked{/if} name="footer[{$k}][status]" lay-skin="switch" lay-text="显示|隐藏">
                        </td>
                        <td class="param-input-td thr nowrap text-center">
                            <a class="color-desc del">删除</a>
                            <a class="color-desc up">上移</a>
                            <a class="color-desc down">下移</a>
                        </td>
                    </tr>
                    {/foreach}
                    {else}
                    <tr class="transition">
                        <td class="param-input-td one nowrap" style="padding: 0px;">
                            <input name="footer[1][name]" placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                        </td>
                        <td class="param-input-td two nowrap" style="padding: 0px;">
                            <input name="footer[1][value]" placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                        </td>
                        <td class="param-input-td nowrap text-center" style="padding: 0px;">
                            <input type="checkbox" name="footer[1][status]" lay-skin="switch" lay-filter="" lay-text="显示|隐藏" id="">
                        </td>
                        <td class="param-input-td thr nowrap text-center">
                            <a class="color-desc del">删除</a>
                            <a class="color-desc up">上移</a>
                            <a class="color-desc down">下移</a>
                        </td>
                    </tr>
                    {/if}
                    </tbody>
                </table>
            </div>
            <table class="layui-table">
                <tr>
                    <td class="text-center notselect padding-none border-none">
                        <button type="button" class="layui-btn full-width layui-btn-primary add">添加</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="hr-line-dashed"></div>

    <div class="col-sm-8 col-sm-offset-2">
        <div class="layui-form-item text-left">
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>
</form>

{/block}
{block name="script"}
<script>
    window.form.render();
    //富文本
    require(['ckeditor'],function () {
        window.createEditor('[name="desc"]', {height: 400});
        window.createEditor('[name="linian"]', {height: 400});
        window.createEditor('[name="lesson"]', {height: 400});
    })

    var key;
    $(function () {
        key = $('.param-table-list .transition').length-1;
    })
    $('.add').on('click',function () {
        key++;
        var html_str = `<tr class="transition">
                        <td class="param-input-td one nowrap" style="padding: 0px;">
                            <input name="footer[${key}][name]" placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                        </td>
                        <td class="param-input-td two nowrap" style="padding: 0px;">
                            <input name="footer[${key}][value]" placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                        </td>
                        <td class="param-input-td nowrap text-center" style="padding: 0px;">
                            <input type="checkbox" name="footer[${key}][status]" lay-skin="switch" lay-filter="" lay-text="显示|隐藏" id="">
                        </td>
                        <td class="param-input-td thr nowrap text-center">
                            <a class="color-desc del">删除</a>
                            <a class="color-desc up">上移</a>
                            <a class="color-desc down">下移</a>
                        </td>
                    </tr>`;
        $('tbody.param-table-list').append(html_str);
        form.render();
    })

    $('tbody.param-table-list').on('click','.del',function () {
        $(this).parents('.transition').remove();
    })

    $('tbody.param-table-list').on('click','.up',function () {
        var parentsDiv = $(this).parents(".transition");
        var prev = parentsDiv.prev();
        if(prev.html()!=undefined){
            //prev.before(parentsDiv);
            prev.fadeOut("fast",function(){
                $(this).before(parentsDiv);
            }).fadeIn();
        }
    })

    $('tbody.param-table-list').on('click','.down',function () {
        var parentsDiv = $(this).parents(".transition");
        var next = parentsDiv.next();
        if(next.html()!=undefined){
            //next.after(parentsDiv);
            next.fadeOut("fast",function(){
                $(this).after(parentsDiv);
            }).fadeIn();
        }
    })
</script>
{/block}